<template>
  <vxe-table align="left" :data="tableData" size="small" border min-height="0">
    <vxe-column field="id" title="文档记录ID" />
    <vxe-column field="fileName" title="文件" width="30%">
      <template #default="{ row }">
        <el-link type="primary">{{ row.fileName }}</el-link>
      </template>
    </vxe-column>
    <vxe-column field="fileName" title="文件关联" width="30%">
      <template #default="{ row }">
        <el-link type="primary">{{ row.fileName }}</el-link>
      </template>
    </vxe-column>
    <vxe-column field="people" title="上传人" />
    <vxe-column field="createTime" title="上传时间">
      <template #default="{ row }">
        {{ $XEUtils.toDateString(row.createTime, 'yyyy-MM-dd HH:mm:ss') }}
      </template>
    </vxe-column>
    <vxe-column title="操作" width="80">
      <template #default="{ row }">
        <el-link type="primary" target="_blank" :href="row.fileUrl" download>
          下载
        </el-link>
      </template>
    </vxe-column>
  </vxe-table>
  <el-pagination
    v-if="tableData.length"
    background
    :current-page="queryForm.pageNo"
    :layout="layout"
    :page-size="queryForm.pageSize"
    :total="total"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  />
</template>

<script setup>
  import { getDocsPage } from '@/api/project/docs'

  const props = defineProps({
    businessId: {
      type: [Number, String],
      default: '',
    },
    businessType: {
      type: [Number, String],
      default: '',
    },
    businessTypes: {
      type: Array,
      default: () => [],
    },
  })

  const tableData = ref([])
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const total = ref(0)
  const queryForm = ref({
    pageNo: 1,
    pageSize: 10,
  })

  const getList = () => {
    let params = {
      ...queryForm.value,
      businessId: props.businessId,
    }
    props.businessType && (params.businessType = props.businessType)
    props.businessTypes && (params.businessTypes = props.businessTypes)
    getDocsPage(params).then((res) => {
      if (res.code == 0 || res.code == 200) {
        tableData.value = res.data.list || []
      }
    })
  }

  const handleSizeChange = (val) => {
    queryForm.value.pageSize = val
    getList()
  }

  const handleCurrentChange = (val) => {
    queryForm.value.pageNo = val
    getList()
  }

  getList()
</script>

<style lang="scss" scoped></style>
